import React, { Component } from 'react'
import CustomButton from 'src/components/button/CustomButton'
import { Text, View, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'

export default class OrderComponent extends Component {

  static propTypes = {
    orderLabel: PropTypes.array,
    activeLabel: PropTypes.string,
    orderClick: PropTypes.func
  }

  constructor(props) {
    super(props)
    this.state = {
      activeLabel: props.activeLabel
    }
  }

  render() {
    const { orderLabel, activeLabel } = this.props
    return (
      <View style={styles.recommendView}>
        {orderLabel.map((item) => {
          return (
            <CustomButton
              key={item.label}
              style={styles.recommendItemView}
              onPress={this._orderClick}
              params={item}>
              <Text
                style={[styles.recommendItemText, item.label === activeLabel && { color: '#FFE400' }]}
              >{item.label}</Text>
            </CustomButton>
          )
        })}
      </View>
    )
  }

  _orderClick = (item) => {
    const { orderClick } = this.props
    this.setState({ activeLabel: item.label })
    orderClick && orderClick(item)
  }
}

const styles = StyleSheet.create({
  recommendView: {
    padding: ScaleS(20)
  },
  recommendItemView: {
    paddingVertical: ScaleS(20)
  },
  recommendItemText: {
    color: '#000000',
    fontSize: ScaleT(18),
    fontWeight: '400'
  }
})
